import React from "react"
import ReactEcharts from 'echarts-for-react'

export default class Pie extends React.Component {

    state = {
      sales:[5, 20, 36, 10, 10, 20],
      stores:[15, 120, 6, 40, 110, 20]
    }

    /**
     * 饼图的配置对象
     */
     getOption = (sales,stores) =>{
      return {
          title : {
              text: '用户访问来源',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 'left',
              data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:335, name:'直接访问'},
                      {value:310, name:'邮件营销'},
                      {value:234, name:'联盟广告'},
                      {value:135, name:'视频广告'},
                      {value:1548, name:'搜索引擎'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      }
  }

  render() {
    const {sales,stores} = this.state;
    return (
      <div >
            <ReactEcharts option={this.getOption(sales,stores)} style={{width:1000, paddingLeft:650}} />
      </div>
    )
  }
}
